<template>
    <div class="register-div">
        <div class="form-div">
            <h3>xxx管理系统</h3>
            <a-form layout="horizontal" ref="formRef" :model="formState" :rules="rules" :label-col="labelCol"
                :wrapper-col="wrapperCol">
                <a-form-item ref="userName" label="用户名" name="userName">
                    <a-input v-model:value="formState.userName" />
                </a-form-item>
                <a-form-item label="昵称" name="nickName">
                    <a-input v-model:value="formState.nickName" />
                </a-form-item>
                <a-form-item label="性别" name="gender">
                    <a-radio-group v-model:value="formState.gender">
                        <a-radio value="m">男</a-radio>
                        <a-radio value="w">女</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="密码" name="password">
                    <a-input-password v-model:value="formState.password" />
                </a-form-item>
                <a-form-item label="手机号" name="phone">
                    <a-input v-model:value="formState.phone" />
                </a-form-item>
                <a-form-item label="邮箱" name="email">
                    <a-input v-model:value="formState.email" />
                </a-form-item>
                <a-form-item label="年龄" name="age">
                    <a-input-number v-model:value="formState.age" />
                </a-form-item>
                <a-form-item label="角色" name="identify">
                    <a-select v-model:value="formState.identify" placeholder="请选择您的角色">
                        <a-select-option value="ordinary">普通用户</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button type="primary" @click="onSubmit">注册</a-button>
                    <a-button style="margin-left: 10px" @click="resetForm" danger>重置</a-button>
                    <a-button style="margin-left: 10px" @click="back">返回</a-button>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const formRef = ref();
const formState = reactive({
    userName: "",
    nickName: "",
    gender: "",
    password: "",
    phone: "",
    email: "",
    age: "",
    identify: "ordinary",
})

const onSubmit = () => {
    console.log(formState);
}

const resetForm = () => {
  formRef.value.resetFields();
};

const back = () => {
    router.back();
}

const labelCol = {
    span: 5,
};
const wrapperCol = {
    span: 13,
};

const rules = {
    userName: [
        {
            required: true,
            message: '请输入用户名',
            trigger: 'blur',
        }
    ],
    password: [
        {
            required: true,
            message: '请输入密码',
            trigger: 'change',
        },
        {
            min: 6,
            max: 16,
            message: '长度在 6 到 16 个字符',
            trigger: 'blur'
        }
    ],
    phone: [
        {
            required: true,
            message: '请输入手机号',
            trigger: 'blur',
        },
    ],
    age: [
        {
            required: true,
            message: '请输入年龄',
            trigger: 'blur'
        }
    ],

}
</script>

<style scoped></style>